<template>
	<div style="width:100%;">
		<div ref="nav_root" class="nav_root" v-if="!headerResizeState">
			<div style="width: 100%;" ref="transformBox">
				<div class="headerRight" :style="'background:' + backgroundColor" ref="nav">
					<div class="burger" v-if="hasList" @click.stop="showList" ref="burger">
						<i class="burgers"></i>
						<i class="burgers"></i>
						<i class="burgers"></i>
					</div>
					<div v-if="hasBack" class="delivery" ref="back" @click="mGoBack">
						<i class="symbol1" :style="'border-color:' + fontColor"></i>
						<i class="symbol2" :style="'border-color:' + fontColor"></i>
					</div>
					<div class="brandLogo" v-if="hasLogo">
						<img src="static/image/ningjialogo.png" alt="ningLogo">
					</div>
					<div slot="header">

					</div>
					<div class="detail" :style="'color:' + fontColor" v-if="hasTitle">{{title}}</div>

					<div v-if="titleType == 'classify' " class="cjy-title-text-center">
						<div>
							<span style="position:relative;" @click="$emit('showClassify')">{{title}}
                <div class="cjyUp" :class="{cjyDown:isShowFirstClassify}">
                  <div class="cjy-arrow"></div>
                </div>
              </span>
							<a class="cjy-search_icon" v-if="hasSearch" @click="$router.push('searcher')">
								<i class="icon njfont nj-sousuo"></i>
							</a>
						</div>
					</div>

					<div class="rightIcon">

						<v-CartShowNum v-if="hasCart"></v-CartShowNum>
					</div>
					<RecommendStore style="width:65%;position: absolute;left: 17%;" :isHome="isHome"></RecommendStore>
					<slot></slot>
				</div>
				<!-- <slot name="zx"></slot> -->
				<!-- <top-popup :isShow="getIsShow" :isHome="isHome" :shoreList="shoreList" :addressList="addressList"></top-popup> -->
			</div>
		</div>
		<div class="header-resize" v-show="headerResizeState"></div>
	</div>
</template>
<script>
	import axios from 'axios';
	import CartShowNum from "../../components/CartShowNum";
	import { mapState, mapGetters, mapMutations } from 'vuex';
	import checkCssStyleCompatibility from "../../utils/checkCssStyleCompatibility.js";
	import RecommendStore from '../../components/recommendStore';
	export default {
		props: {
			title: "",
			hasTitle: {
				type: Boolean,
				default: false
			},
			hasList: {
				type: Boolean,
				default: false
			},
			hasCart: {
				type: Boolean,
				default: false
			},
			hasBack: {
				type: Boolean,
				default: false
			},
			goBack: {
				type: Function,
				default: () => {
					window.history.go(-1);
				}
			},
			hasLogo: {
				type: Boolean,
				default: false
			},
			textAlign: {
				type: String,
				default: 'left'
			},
			isHome: {
				type: Boolean,
				default: false
			},
			titleType: {
				type: String,
				default: ''
			},
			hasSearch: {
				type: Boolean,
				default: false
			},
			isShowFirstClassify: {
				type: Boolean,
				default: false
			},
			//是否开启兼容模式
			IDGModel: {
				type: Boolean,
				default: false
			},
			//需要进行兼容模式监听的input框的selector
			IDGInputSelector: {
				type: [String, Array],
				default: ""
			},
			//小周的绿色头部
			backgroundColor: {
				type: String,
				default: '#FFF'
			},
			//小周的白色标题
			fontColor: {
				type: String,
				default: '#444'
			}
		},
		data() {
			return {
				flag: true,
				isShow: true,
				shoreList: [],
				addressList: [1, 2, 3],
				list: [{
						name: "商城首页",
						url: "/home/home",
						class: "class_a",
						iconStyle: "icon njfont nj-shangcheng"
					},
					{
						name: "商品分类",
						url: "/main/classify",
						class: "class_a",
						iconStyle: "icon njfont nj-fenlei"
					}
				],
				restList: [{
					name: "购物车",
					url: "/cart",
					class: "class_a",
					iconStyle: "icon njfont nj-gouwuche"
				}, {
					name: "个人中心",
					url: "/main/profile",
					class: "class_a",
					iconStyle: "icon njfont nj-wode"
				}, {
					name: " 我的订单",
					url: "/main/order",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的车辆",
					url: "/main/car",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的优惠券",
					url: "/discount",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的收藏",
					url: "/collect",
					iconStyle: "level_menu fa fa-angle-right"
				}, {
					name: " 我的消息",
					url: "/news",
					iconStyle: "level_menu fa fa-angle-right"
				}],
				//header占位框的状态
				headerResizeState: false
			}
		},
		computed: {
			...mapGetters('wxh', {
				login: "login",
				userInfo: 'userInfo',
				sessionId: 'sessionId'
			}),
			...mapGetters('zx', [
				"getIsShow"
			]),
			isiOS() {
				return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios
			}
		},
		components: {
			"v-CartShowNum": CartShowNum,
			// "TopPopup": TopPopup,
			RecommendStore
		},
		async mounted() {
			var container = document.getElementsByClassName("home-container")[0];
			if(container) {
				container.style.transform = "translateX(0px)";
			}
			//添加右划划出侧边栏的事件
			this.addEventOnContainer();
			if(this.IDGInputSelector) {
				if(!isiOS) {
					return;
				}
				setTimeout(() => {
					this.addInputEventListener();
				}, 100);
			}
		},
		methods: {
			//添加右划划出侧边栏的事件
			addEventOnContainer() {
				let touchstartx = 0;
				let touchstarty = 0;
				let touchendx = 0;
				let touchendy = 0;
				let isConflict = 0; //判断是否可以滑动的标志
				var container = document.getElementsByClassName("home-container")[0];
				if(container) {
					//监听滑动事件
					container.addEventListener('touchstart', TouchStart.bind(this), false);
					container.addEventListener('touchmove', TouchMove, false);
					container.addEventListener('touchend', TouchEnd.bind(this), false);
				}

				function TouchStart(e) {
					//滑动时不会出现侧边栏的区域
					var scroller = document.getElementsByClassName('scroller_list');
					var wrapper = document.getElementsByClassName('wrapper-content');
					var noSlide = document.getElementsByClassName('noSlide');
					var headerRight = document.getElementsByClassName('headerRight');
					//不会出现侧边栏区域拼接成一个数组
					let exemptArea = convertNodeList(scroller).concat(convertNodeList(noSlide)).concat(convertNodeList(wrapper)).concat(convertNodeList(headerRight));
					exemptArea.forEach(ele => {
						isChildOf(e.target, ele, container) && (isConflict = 1);
					})
					touchstartx = e.touches[0].clientX;
					touchstarty = e.touches[0].clientY;
					touchendx = e.touches[0].clientX;
					touchendy = e.touches[0].clientY;
				}

				function TouchMove(e) {
					touchendx = e.touches[0].clientX;
					touchendy = e.touches[0].clientY;
				}

				function TouchEnd(e) {
					Math.abs(touchendy - touchstarty) < touchendx - touchstartx && touchendx - touchstartx > document.documentElement.clientWidth / 3 && !isConflict && this.showList();
					isConflict = 0;
				}

				//把节点组转化为数组
				function convertNodeList(nodeList) {
					if(nodeList.length) {
						return Array.prototype.slice.call(nodeList);
					} else {
						return [];
					}
				}

				//判断是否为可滑动部分的子节点   点击的节点·不会出现侧边栏的区域·检测到的最顶级节点
				function isChildOf(target, ele, TopNode) {
					if(target == TopNode) {
						return 0;
					}
					if(target == ele) {
						return 1;
					}
					if(target != TopNode && target != ele) {
						return isChildOf(target.parentNode, ele, TopNode);
					}
				}
			},
			//划出侧边栏
			showList(e) {
				var that = this;
				// await this.reFreshUserInfo(this);
				// var burgers = this.$refs.burger.children;
				var burgers = document.getElementsByClassName('burgers');
				var container = document.getElementsByClassName("home-container")[0];
				var list = document.getElementsByClassName("aside")[0];
				if(!list) {
					PSEvent.listen("doOfflineAsideEvents", () => {
						setTimeout(() => {
							this.showList();
						}, 0);
					});
					return;
				};
				container.style.position = "absolute";
				list.style.position = "absolute";
				var userAgent = navigator.userAgent;
				var index = userAgent.indexOf("Android");
				if(index >= 0) {
					var androidVersion = parseFloat(userAgent.slice(index + 8));
					if(androidVersion < 4.5) {
						if(container.style.left != "260px") {
							container.style.left = "260px";
							container.style.top = "0";
							list.style.left = "260px";
							list.style.top = "0";
							let shade = document.createElement("div");
							let style = `width:100%;height:100%;background:black;opacity:.3;position:absolute;left:0;top:0;z-index:100;`;
							shade.setAttribute("id", "shadeBlock");
							shade.setAttribute("style", style);
							container.appendChild(shade);
							shade.onclick = function(e) {
								container.removeChild(shade);
								container.style.left = "0px";
								container.style.top = "0";
								list.style.left = "0px";
								list.style.top = "0";
							}
						} else {
							container.style.left = "0px";
							container.style.top = "0";
							list.style.left = "0px";
							list.style.top = "0";
						}
					} else {
						ProgressiveList("Android");
					}
				} else {
					ProgressiveList("IOS");
				}

				function ProgressiveList(model) {
					container.style.transition = "transform .5s ease-out 0.1s";
					var hasTouch = function() {
						var touchObj = {};
						touchObj.isSupportTouch = "ontouchend" in document ? true : false;
						touchObj.isEvent = touchObj.isSupportTouch ? "touchstart" : "click";
						return touchObj.isEvent;
					}
					//检验burgers.length是为了防止滑动时报错
					if(container.style.transform != "translateX(260px)" && burgers.length) {
						burgers[0].className += " burgers0";
						burgers[1].className += " burgers1";
						burgers[2].className += " burgers2";
						container.style.transform = "translateX(260px)";
						list.style.transform = "translateX(0px)";
						let shade = document.createElement("div");
						let style = `width:100%;height:100%;background:black;opacity:.3;position:absolute;left:0;top:0;z-index:100;`;
						shade.setAttribute("id", "shadeBlock");
						if(model == "Android") {
							shade.style.width = '100%';
							shade.style.height = '100%';
							shade.style.background = 'black';
							shade.style.opacity = '0.3';
							shade.style.position = 'absolute';
							shade.style.left = '0';
							shade.style.top = '0';
							shade.style.zIndex = '100';
						} else {
							shade.setAttribute("style", style);
						}
						container.appendChild(shade);
						// container.onclick = function (e) {
						//   e.preventDefault();
						//   burgers[0].classList.remove("burgers0");
						//   burgers[1].classList.remove("burgers1");
						//   burgers[2].classList.remove("burgers2");
						//   aside.style.transform = `translateX(-260px)`;
						//   container.style.transform = `translateX(0px)`;
						// }
						let startX = 0;
						let endX = 0;
						let movingX = 0;
						let aside = document.querySelector(".aside");
						if(hasTouch() == "touchstart") {
							shade.addEventListener("touchstart", commence, false);

							shade.addEventListener("touchmove", moving, false);

							shade.addEventListener("touchend", termination, false);

							// container.addEventListener("touchstart", commence, false);

							// container.addEventListener("touchmove", moving, false);

							// container.addEventListener("touchend", Ctermination, false);

							function commence(e) {
								e.preventDefault();
								startX = e.touches[0].clientX;
							}

							function moving(e) {
								movingX = e.touches[0].clientX;
							}

							function termination(e) {
								setTimeout(() => {
									e.preventDefault();
									// if(movingX - startX <= 0){
									burgers[0].classList.remove("burgers0");
									burgers[1].classList.remove("burgers1");
									burgers[2].classList.remove("burgers2");
									aside.style.transform = `translateX(-260px)`;
									container.style.transform = `translateX(0px)`;
									container.removeChild(shade);
									// }
									startX = 0;
									movingX = 0;
									shade.removeEventListener("touchstart", commence);
									shade.removeEventListener("touchmove", moving);
									shade.removeEventListener("touchend", termination);
									// container.removeEventListener("touchstart", commence);
									// container.removeEventListener("touchmove", moving);
									// container.removeEventListener("touchend", termination);
								}, 300)
							}

							// function Ctermination (e) {
							//   setTimeout(() => {
							//     e.preventDefault();
							//     if(movingX - startX <= 0){
							//       burgers[0].classList.remove("burgers0");
							//       burgers[1].classList.remove("burgers1");
							//       burgers[2].classList.remove("burgers2");
							//       aside.style.transform = `translateX(-260px)`;
							//       container.style.transform = `translateX(0px)`;
							//     }
							//     startX = 0;
							//     movingX = 0;
							//     container.removeEventListener("touchstart", commence);
							//     container.removeEventListener("touchmove", moving);
							//     container.removeEventListener("touchend", Ctermination);
							//   },300)
							// }
						} else {
							shade.onclick = function(e) {
								setTimeout(() => {
									e.preventDefault();
									burgers[0].classList.remove("burgers0");
									burgers[1].classList.remove("burgers1");
									burgers[2].classList.remove("burgers2");
									aside.style.transform = `translateX(-260px)`;
									container.style.transform = `translateX(0px)`;
									container.removeChild(shade);
								}, 300)
							}
						}
						// shade.ontouchstart = function (e) {
						//   e.preventDefault();
						//   startX = e.touches[0].clientX;
						// };

						// shade.ontouchmove = function (e) {
						//   movingX = e.touches[0].clientX;
						// };
						// shade.ontouchend = function (e) {
						//   setTimeout(() => {
						//     e.preventDefault();
						//     if(movingX - startX <= 0){
						//       burgers[0].classList.remove("burgers0");
						//       burgers[1].classList.remove("burgers1");
						//       burgers[2].classList.remove("burgers2");
						//       aside.style.transform = `translateX(-260px)`;
						//       container.style.transform = `translateX(0px)`;
						//       container.removeChild(shade);
						//     }
						//     startX = 0;
						//     movingX = 0;
						//   },300)
						// }
					}
				}

				function lowerHideList() {
					if(checkCssStyleCompatibility("transform")) {
						// let styleValue = "position: absolute;left: 260px;top: ";
						container.style.left = "0";
						container.style.top = "0";
						list.style.left = "0";
						list.style.top = "0";
					}
				}
			},
			mGoBack() {
				setTimeout(() => {
					this.$store.commit('cjy/SET_IS_RETURN', true)
					if(window.history.length == 2 || window.history.length < 2) {
						this.$router.push({
							path: 'home'
						})
					} else {
						this.goBack();
					}
				}, 0);
			},
			//计算头部应该处于的位置，当对应的input框获取到焦点时调用该方法
			calculateTopPosition() {
				this.headerResizeState = true;
				// setTimeout(() => {
				let top1 = document.documentElement.scrollTop;
				let top2 = document.body.scrollTop;
				let top = top1 ? top1 : top2;
				let el = document.querySelector(".nav_root");
				el.style.position = "absolute";
				el.style.left = "0";
				el.style.top = `${top}px`;
				el.style.zIndex = "1";
				// }, 30);
			},
			//重置头部状态
			resetTopPosition() {
				this.headerResizeState = false;
				let el = document.querySelector(".nav_root");
				el.style.position = "static";
				el.style.top = "unset";
				el.style.left = "unset";
			},
			gwPlan() {
				setTimeout(() => {
					this.headerResizeState = !this.headerResizeState;
				}, 17)

				setTimeout(() => {
					this.headerResizeState = !this.headerResizeState;
				}, 18)
			},
			//添加头部的监听事件
			addInputEventListener() {
				if(Array.isArray(this.IDGInputSelector)) {
					this.IDGInputSelector.forEach(item => {
						if(document.querySelector(item)) {
							// window.onscroll = this.calculateTopPosition;
							// document.querySelector(item).addEventListener("focus", this.resetTopPosition, false);
							document.querySelector(item).addEventListener("blur", this.gwPlan, false);
						}
					});
					return false;
				}
				window.onscroll = this.calculateTopPosition;
				// document.querySelector(this.IDGInputSelector).addEventListener("focus", this.calculateTopPosition, false);
				document.querySelector(this.IDGInputSelector).addEventListener("blur", this.gwPlan, false);

			},
			//移除监听事件

			// initBackClickEvent() {

			//     // if (document.querySelector(".delivery")) {
			//     if (this.$refs.back) {
			//         // document.querySelector(".delivery").addEventListener("click", () => {
			//         this.$refs.back.addEventListener("touchstart", () => {
			//             this.mGoBack();
			//         }, false);
			//     }

			// }
		}
	}
</script>
<style scoped>
	.nav_root {
		width: 100%;
		overflow: hidden;
	}
	
	.header-resize {
		height: 3rem;
		width: 100%;
		background: white;
	}
	
	.burgers0 {
		transform: translateX(-0.25rem) rotate(-45deg) scaleX(.5);
		/* width: .5rem; */
		margin: 10px 0 2px 0;
	}
	
	.burgers1 {
		margin: 2px 0 2px 1px;
	}
	
	.burgers2 {
		transform: translateX(-0.25rem) rotate(45deg) scaleX(.5);
		/* width: .5rem; */
		margin: 2px 1px 2px 0;
	}
	
	.headerRight {
		width: 100%;
		min-height: 2.25rem;
		font-size: 0.9rem;
		text-align: center;
		display: table;
		transition: transform 0.5s ease-out 0.1s;
		transform: translateX(0px);
		border: none;
		background-size: 100% 1px;
		background-repeat: no-repeat;
		background-position: bottom;
		background-image: linear-gradient(0, #eaeaea, #eaeaea 50%, transparent 50%);
		background-image: -webkit-linear-gradient(90deg, #eaeaea, #eaeaea 50%, transparent 50%);
		background: #ffffff;
		height: 3rem;
		line-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444444;
	}
	
	.aui-bar-light {
		color: #444444;
		font-weight: bold;
	}
	
	.burger {
		padding: 0.4rem 0.6rem;
		cursor: pointer;
		margin-left: 0.4rem;
		margin-top: -2px;
		position: absolute;
		top: 0.5rem;
		left: 0;
		transition: all .2s ease-out 0.1s;
	}
	
	.delivery {
		padding: 0.4rem 1rem 0.4rem 0.6rem;
		cursor: pointer;
		margin-left: 0.4rem;
		margin-top: -2px;
		position: absolute;
		top: 0.5rem;
		left: 0;
		will-change: transform;
		transition: all .2s ease-out 0.1s;
	}
	
	.delivery>i {
		display: block;
		height: 2px;
		width: .8rem;
		margin: .4rem 0;
		opacity: 0.8;
		background: #000;
		will-change: transform;
		transition: transform 0.2s ease-out;
	}
	
	.symbol1 {
		transform: rotate(-45deg);
		width: .5rem;
	}
	
	.symbol2 {
		transform: rotate(45deg);
		width: .5rem;
	}
	
	.brandLogo {
		left: 3rem;
		right: 3rem;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: center;
		white-space: nowrap;
		width: auto;
		z-index: 2;
		font-weight: 500 !important;
		font-size: 1.1rem;
		margin-top: 0.65rem;
		top: 1px;
	}
	
	.brandLogo img {
		max-height: 1.6rem;
	}
	
	.rightIcon {
		position: absolute;
		top: 0.5rem;
		right: 0.75rem;
		font-weight: 100;
		line-height: 1rem;
	}
	
	.shoppingCart {
		display: inline-block;
		height: 2rem;
		width: 2rem;
		vertical-align: top;
		text-align: center;
		position: relative;
	}
	
	.njCart {
		font-size: 1.4rem;
		display: inline-block;
		text-align: center;
		position: relative;
		color: #444444;
		opacity: 0.7;
		width: 2rem;
		height: 2rem;
		left: -1px;
		top: 0.3rem;
		text-indent: 0;
		line-height: 1;
	}
	
	.auiBadge {
		font-weight: bold;
		display: inline-block;
		width: auto;
		text-align: center;
		min-width: 0.8rem;
		height: 0.8rem;
		line-height: 0.8rem;
		padding: 0 0.2rem;
		font-size: 0.6rem;
		color: #ffffff;
		background-color: #ff2600;
		border-radius: 0.4rem;
		position: absolute;
		top: 0.2rem;
		left: 60%;
		z-index: 99;
	}
	
	.njCart::before {
		content: "\e6e4"
	}
	
	.aside {
		display: none;
		position: absolute;
		top: 0;
		height: 100%;
		bottom: 0;
		left: -260px;
		width: 260px;
		will-change: transform;
		transition: transform 0.5s ease-out 0.1s;
		transform: translateX(-260px);
		overflow: visible;
		z-index: 100;
	}
	
	.accountBox {
		height: 3rem;
		cursor: pointer;
		width: 100%;
		background: #404040;
	}
	
	.roomsList {
		direction: rtl;
		position: absolute;
		top: 3rem;
		bottom: 0;
		width: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		display: block;
		padding-top: 15px;
		z-index: 9999;
		background-color: #464646;
	}
	
	.roomsList>.wrapper {
		direction: ltr;
		padding-left: 8px;
		padding-bottom: 1em;
		position: relative;
	}
	
	.roomsList>.wrapper>ul {
		position: relative;
	}
	
	.info {
		position: relative;
		height: 100%;
		padding: 10px 0 10px 18px;
		z-index: 100;
	}
	
	.thumb {
		float: left;
		position: relative;
		width: 42px;
		height: 42px;
	}
	
	.thumb::after {
		content: " ";
		display: block;
		width: 8px;
		height: 8px;
		z-index: 10;
		position: absolute;
		border-radius: 4px;
		top: 18px;
		left: -14px;
	}
	
	.avatarImg {
		width: 100%;
		height: 100%;
		background: url(../../lib/image/user.jpg) no-repeat 100% 100%;
		background-size: cover;
		border-radius: 4px;
	}
	
	.data {
		float: left;
		padding: 0 25px 0 10px;
		position: relative;
		height: 100%;
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
		width: calc(100% - 60px);
		color: rgba(255, 255, 255, 0.6);
	}
	
	.open-room {
		padding: 8px 46px 8px 6px;
		height: 1.8rem;
		display: block;
		border-radius: 2px 0 0 2px;
		font-size: .75rem;
		position: relative;
		line-height: .75rem;
		white-space: nowrap;
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		color: rgba(255, 255, 255, 0.6);
		text-decoration: none;
		text-align: left;
	}
	
	.class_a {
		font-weight: 500;
		color: #e1e1e1;
	}
	
	.wrapper>ul>li>a>i {
		vertical-align: middle;
		color: rgba(255, 255, 255, 0.3);
	}
	
	.detail {
		background: transparent;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		/* width: 50%; */
		text-overflow: ellipsis;
		z-index: 2;
		font-weight: 100;
		font-size: 1.0rem;
		top: 1px;
		right: 3rem;
		font-weight: 500;
		width: 8.8rem;
    	overflow: hidden;
	}
	
	.cjy-title-text-center {
		margin: auto;
		left: 0;
		right: 0;
		position: absolute;
		font-size: 1.1rem;
		font-weight: 500;
		width: 65%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		word-break: break-all;
	}
	
	.cjy-search_icon {
		float: right;
		/* display: inline-block;
    height: 2rem;
    width: 2rem;
    position: absolute;
    vertical-align: top;
    left: -5rem; */
	}
	
	.cjy-search_icon i {
		/* top: 0.3rem;
    position: absolute; */
		font-size: 1.35rem;
		color: #444444;
		opacity: 0.7;
	}
	
	.cjy-arrow {
		position: absolute;
		width: 0;
		height: 0;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0%;
		margin: auto;
		border-left: 0.25rem solid transparent;
		border-right: 0.25rem solid transparent;
		border-bottom: 0.35rem solid black;
		border-top: 0 solid transparent;
		/*margin-bottom: -0.175rem;*/
	}
	
	.cjyUp {
		transform: rotateZ(-180deg);
		position: absolute;
		transition: 0.3s;
		right: -0.7rem;
		height: 100%;
		width: 0.5rem;
		top: 0
	}
	
	.cjyDown {
		transform: rotateZ(0deg);
	}
</style>